<template>
	<!-- 内容 -->
	<div id="app">
		<div id="single_list_vue" class="content" style="background: rgb(245, 247, 250); padding-top: 20px;">
			<div class="t_a1">
				<div class="course-a" style="margin-bottom: 15px;"><span>首页 &gt; </span> <!---->
					<span>写作考场真题(A)</span> <!---->
				</div>
				<div style="display: flex;">
					<div class="top-title-active"
						:class="{'top-title-active':state.TaskIndex == 1,'top-title':state.TaskIndex != 1,}"
						@click="taskChange(1)">
						Task1小作文
						<div :class="{'top-nar-active':state.TaskIndex == 1,'top-nar':state.TaskIndex != 1,}"
							style="margin: 10px auto 18px;"></div>
					</div>
					<div class="top-title1"
						:class="{'top-title-active':state.TaskIndex != 1,'top-title':state.TaskIndex == 1,}"
						style="margin-left: 40px;" @click="taskChange(2)">
						Task2大作文
						<div :class="{'top-nar-active':state.TaskIndex != 1,'top-nar':state.TaskIndex == 1,}"
							style="margin: 10px auto 18px;"></div>
					</div>
				</div>
				<div class="top" style="height: 56px;" v-if="state.TaskIndex == 1">
					<div class="top_in1" style="display: flex; height: 56px; align-items: center; width: 100%;">
						<div style="width: 6%;">
							<div class="top-in-title">题型</div>
						</div>
						<div style="width: 94%;">
							<div class="top_btn" @click="examChange(index)"
								:class="{'qt_btn_active':index==state.examIndex}" v-for="(item,index) in state.examList"
								:key="index">{{item.name}}
							</div>
						</div>
					</div>
				</div>
				<div class="top" style="height: auto;" v-if="state.TaskIndex == 2">
					<div class="top_in1" style="display: flex; height: 56px; align-items: center; width: 100%;">
						<div style="width: 6%;">
							<div class="top-in-title">题型</div>
						</div>
						<div style="width: 94%;">
							<div class="top_btn" @click="bigExamChange(index)"
								:class="{'qt_btn_active':index==state.bigExamIndex}"
								v-for="(item,index) in state.bigExam" :key="index">{{item.name}}</div>
						</div>
					</div>
					<div class="top_in1" style="display: flex; margin-top: 10px;">
						<div style="width: 6%;">
							<div class="top-in-title" style="width: 100%;">主题</div>
						</div>
						<div class="top_in_content" style="width: 94%;">
							<div class="top_btn" @click="themeChange(index)" v-for="(item,index) in state.themeList"
								:class="{'qt_btn_active':index==state.themeIndex}" :key="index"
								style="margin-bottom: 15px;">
								{{item.name}}
							</div>
						</div>
					</div>
				</div>
				<div class="content-All">
					<div class="wr-content">
						<div class="wr-content-left">
							<template v-for="(v,k) in state.list[state.TaskIndex-1]" :key="k">
								<template
									v-if="state.TaskIndex==1?(v.examType == state.examIndex || state.examIndex == 0):((v.examType == state.bigExamIndex || state.bigExamIndex == 0)&&(v.theme == state.themeIndex || state.themeIndex == 0))">
									<div s_id="2300" class="check-span wr-content-left-in"
										@click="selectListItem(k,v.id)"
										:class="{'wr-content-left-in-select':state.listIndex==v.id}"
										style="margin-top: 5px;"><img src="../assets/edit36.png"
											style="width: 13.8px;">&nbsp;&nbsp;
										<span id="check2300" class="wr-label">
											{{v.title}}
											<span style="font-size: 13px;">{{v.academicName}}&nbsp;</span>
											<span style="font-size: 13px;">{{v.examTypeName}}&nbsp;</span>
										</span>
									</div>
								</template>
							</template>
						</div>
						<div class="single-content2" style="width: 704px; height: 655px; padding: 0px 50px 20px;">
							<div>
								<div class="single-wr-btn">
									<div class="single-wr-title" @click="toWriteTest(2)">写作文
									</div>
									<div class="single-wr-title" @click="toWriteTest(1)">看范文
									</div>
								</div>
								<div class="html_box" v-if="state.examListConten"
									v-html="state.examListConten.contentText"></div>
								<div v-if="state.content.analysis">
									<p style="font-size: 16px;">
										<strong>答题思路</strong>
									</p>
									<div class="qt-b" style="font-weight: 100; margin-top: 5px;">
										<p v-html="state.content.analysis" style="max-height:200px;overflow:hidden;">
										</p>
										<p>...</p>
									</div>
									<div @click="toWriteTest(1)"
										style="font-size: 14px; color: rgb(37, 107, 169); margin-top: 5px; cursor: pointer;">
										查看完整答题思路&gt;&gt;
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="middle_right" style="margin-top: 20px;">
						<AsidePart></AsidePart>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import AsidePart from "./asidePart.vue"
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	import {
		reactive,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		list: [],
		examIndex: 0,
		bigExam: [{
				name: '全部',
				id: 0
			},
			{
				name: '是否同意',
				id: 1
			},
			{
				name: '利弊分析',
				id: 2
			}, {
				name: '双边讨论',
				id: 3
			}, {
				name: '报告类',
				id: 4
			}
		],
		bigExamIndex: 0,
		examList: [{
				name: '全部',
				id: 0
			},
			{
				name: '柱状图',
				id: 1
			},
			{
				name: '饼图',
				id: 2
			},
			{
				name: '表格',
				id: 3
			},
			{
				name: '曲线图',
				id: 4
			},
			{
				name: '混合图',
				id: 5
			},
			{
				name: '地图',
				id: 6
			},
			{
				name: '流程图',
				id: 7
			},
		],
		listIndex: [0, 0],
		TaskIndex: 1,
		themeList: [{
			name: '全部',
			id: 0
		}, {
			name: '生活类',
			id: 1
		}, {
			name: '经济类',
			id: 2
		}, {
			name: '政府类',
			id: 3
		}, {
			name: '教育类',
			id: 4
		}, {
			name: '语言类',
			id: 5
		}, {
			name: '媒体类',
			id: 6
		}, {
			name: '科技类',
			id: 7
		}, {
			name: '环境类',
			id: 8
		}],
		themeIndex: 0,
		examListConten: null,
		content: {}
	})

	function getqueryById(id) {
		proxy.$http.get('/boot/api/questions/paper/queryById?id=' + id).then(res => {
			let obj = res.data.result.examList[0]
			state.content = obj
			obj.contentText =
				`<style> *[wi100dth='wi100dth']{width:100% !important;height:auto !important;}</style>` + obj
				.contentText
			obj.contentText = obj.contentText.replace(/\<img/g, '<img wi100dth="wi100dth"')
			obj.contentText = obj.contentText.replace(/\<table/g, '<table wi100dth="wi100dth"')
			console.log(obj.contentText.indexOf('<img'), 'hhhhhhhhhhh')
			state.examListConten = obj
			console.log(state.examListConten)
		})
	}

	function selectListItem(k, id) {
		state.listIndex = id
		getqueryById(id)
	}

	function examChange(index) {
		state.examIndex = index
		getFirstOne()
	}

	function bigExamChange(index) {
		state.bigExamIndex = index
		getFirstOne()
	}

	function themeChange(index) {
		state.themeIndex = index
		getFirstOne()
	}

	function taskChange(index) {
		state.TaskIndex = index
		state.listIndex = state.list[state.TaskIndex - 1][0].id
		getqueryById(state.list[state.TaskIndex - 1][0].id)
	}

	function getFirstOne() {
		// state.TaskIndex == 1 ? (v.examType == state.examIndex || state.examIndex == 0) : ((v.examType == state.bigExamIndex || state.bigExamIndex == 0) && (v.theme == state.themeIndex || state.themeIndex == 0))
		if (state.TaskIndex == 1) {
			let item = state.list[0].find(item => (item.examType == state.examIndex || state.examIndex == 0))
			if (item.id) {
				state.listIndex = item.id
				getqueryById(item.id)
			}
		} else {
			let item = state.list[1].find(item => ((item.examType == state.bigExamIndex || state.bigExamIndex == 0) && (
				item.theme == state.themeIndex || state.themeIndex == 0)))
			if (item.id) {
				state.listIndex = item.id
				getqueryById(item.id)
			}
		}
	}

	function getList() {
		proxy.$http.get('/boot/api/questions/paper/listWritingExam?source=6').then(res => {
			let arr1 = []
			let arr2 = []
			res.data.result.forEach((item, index) => {
				if (item.tags == 1) {
					arr1.push(item)
				} else {
					arr2.push(item)
				}
			})
			state.list[0] = arr1
			state.list[1] = arr2
			state.listIndex = state.list[state.TaskIndex - 1][0].id
			getqueryById(state.list[state.TaskIndex - 1][0].id)
		})
	}

	// function toModelEssay() {
	// 	// this.$emit('toModelEssay')
	// 	router.push('ModelEssay')
	// }

	function toWriteTest(type) {
		localStorage.setItem('WriteTest', JSON.stringify(state.examListConten))
		// this.$emit('toWriteTest')

		const query = {
			yw_wd: type
		}
		router.push({
			path: '/home/WriteTest',
			query
		})
	}

	getList()
</script>

<style lang="scss">
	.content-All {
		width: 1299px;
		display: flex;
		justify-content: space-between;
	}

	[v-cloak] {
		display: none !important;
	}

	.top {
		background: #ffffff;
		box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		border-radius: 6px;
		width: 1299px;
		height: 56px;
	}

	.top-title-active {
		font-family: SourceHanSansCN-Medium;
		font-family: -apple-system;
		font-size: 16px;
		color: #383838;
		letter-spacing: 0;
		font-weight: 600;
		cursor: pointer;
	}

	.top-title {
		font-family: SourceHanSansCN-Medium;
		font-family: -apple-system;
		font-size: 16px;
		color: #999999;
		letter-spacing: 0;
		font-weight: 600;
		cursor: pointer;
	}

	.top-nar-active {
		width: 30px;
		height: 4px;
		background: #ff4b40;
		border-radius: 5.5px;
		border-radius: 5.5px;
	}

	.top-nar {
		width: 30px;
		height: 4px;
		background-color: transparent;
		border-radius: 5.5px;
		border-radius: 5.5px;
	}

	.top-in-title {
		width: 100%;
		font-size: 14px;
		color: #333333;
		margin-left: 23px;
		margin-right: 36px;
		display: inline-block;
	}

	.top_btn {
		font-size: 14px;
		color: #666666;
		padding: 3px 12px;
		margin-right: 20px;
		display: inline-block;
		cursor: pointer;
		min-width: 60px;
		text-align: center;
		cursor: pointer;
		caret-color: transparent;
	}

	.wr-img {
		max-width: 350px;
		width: 28%;
		margin-top: 20px;
	}

	.wr-content {
		margin-top: 20px;
		background: #ffffff;
		box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		border-radius: 6px;
		width: 929px;
		height: 680px;
		display: flex;
		padding: 15px 0;
	}

	.wr-content-left {
		width: 225px;
		overflow-y: scroll;
	}

	input[type="checkbox"]:not(.switch):after {
		width: 5.5px !important;
		left: 5.5px !important;
		outline: none !important;
	}

	input[type="checkbox"],
	input[type="radio"] {
		--active-inner: #aaaaaa !important;
		outline: none !important;
	}

	input[type="checkbox"]:checked,
	input[type="radio"]:checked {
		background: #e4ecfa00 !important;
		border-color: #9999 !important;
		outline: none !important;
	}

	input[type="checkbox"],
	input[type="radio"] {
		--input-border: #9999 !important;
		outline: none !important;
	}

	input[type="checkbox"]:not(.switch) {
		border-radius: 3px !important;
		outline: none !important;
	}

	div.search input:nth-child(3) {
		border: none;
	}

	.wr-content-left-in {
		cursor: pointer;
		width: 100%;
		display: flex;
		align-items: center;
		margin: 0 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap !important;
		padding-left: 20px;
	}

	.wr-content-left-in-select {
		cursor: pointer;
		color: white;
		background-image: linear-gradient(90deg, #ff8d80 0%, #ff574d 100%);
		width: 100%;
		display: flex;
		align-items: center;
		margin: 0 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap !important;
		padding-left: 20px;
	}

	.wr-label {
		justify-content: center;
		align-items: center;
		margin-bottom: 0;
		padding: 5px 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		caret-color: transparent;
	}

	::-webkit-scrollbar {
		width: 5px;
		height: 5px;
		background-color: #f5f5f5;
	}

	/*定义滚动条轨道
         内阴影+圆角*/
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #dedede;
	}

	/*定义滑块
         内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: #b6b6b6;
	}

	.single-wr-title {
		caret-color: transparent;
		cursor: pointer;
		position: relative;
		left: 430px;
		top: 30px;
		font-size: 14px;
		background-image: linear-gradient(90deg, #ff8d80 0%, #ff574d 100%);
		border-radius: 4px;
		border-radius: 4px;
		width: 65px;
		height: 26px;
		color: white;
		text-align: center;
		line-height: 26px;
		display: inline-block;
		margin-left: 15px;
	}

	.single-content2 td {
		border: 2px solid #333333;
	}

	.check-span {
		border-bottom: 1px solid rgb(245, 241, 241);
	}

	.qt-b1 strong {
		white-space: normal !important;
	}

	/*修改滚动条样式*/
	div::-webkit-scrollbar {
		width: 10px;
		height: 10px;
		/**/
	}

	div::-webkit-scrollbar-thumb {
		background: #bfbfbf;
		border-radius: 10px;
	}

	div::-webkit-scrollbar-thumb:hover {
		background: #333;
	}
</style>